<template>
  <view>
    <my-message-top :text="'猫咪相册'"></my-message-top>
    
    <view class="cat-pic">
      <text>共{{ total }}张照片</text>
      <view class="cat-pic-box-f">
        <view class="cat-pic-box" v-for="(item,i) in catPic" :key="i">
          <image :src="item" mode=""></image>
        </view>
      </view>
      
    </view>
    
    <add-catPic :kid="kid"></add-catPic>
  </view>
</template>

<script>
  import {getCatImgs} from '../../api/cat.js'
  export default {
    data() {
      return {
        kid: 0,
        total: 0,
        catPic: []
      };
    },
    onLoad(option){
      this.kid = option.id
      this.getCatImgs(this.kid)
    },
    methods:{
     async getCatImgs(id){
       const {data:data} = await getCatImgs(id)
       console.log(data);
       this.total = data.data.imgNumber
       this.catPic = data.data.imgs
     }
    }
  }
</script>

<style lang="scss">
.cat-pic{
  
  text{
    font-size: 20px;
    font-weight: bold;
    color: #666666;
    margin-left: 25rpx;
  }
  .cat-pic-box-f{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 25rpx 25rpx;
  }
  .cat-pic-box{
    
    image{
      width: 340rpx;
      height: 236rpx;
    }
    margin-bottom: 20rpx;
  }
}
</style>
